<div id="EmployeeList" style=" height:100%;margin: 0px;padding: 0px;">
    <!--调用子组件-->
    <list-component ref="child"
                    :title="title"
                    :init-url="initUrl"
                    :line-event="event"
                    :watch-child="eventCallBack"
    ></list-component>
    <!--账户信息-->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="userSelectModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"  >
        <div class="modal-dialog" style="width: 30%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 align="center">绑定员工 {{selectAccountItem.name}} 登陆账户</h4>
                </div>
                <div class="modal-body" style="padding: 0px">
                    <input   type="text" class="form-control" v-model="selectAccount" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="saveSelect()" data-dismiss="modal">保存更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>

<script>
    $(document).ready(function(){
        //采用vue
        var EmployeeList=new Vue({
            el: '#EmployeeList',
            data: {
                title:'职工信息',
                initUrl : '/pageInit/getInitListPageDto/Employee',
                event : ['绑定登陆用户'],
                child : null,
                selectAccountItem:{},
                selectAccount:null,
            },
            methods: {
                /**与event数组配合使用 当触发点击事件时回调的方法*/
                eventCallBack: function(item,name) {
                    if(name = '绑定登陆用户') {
                        this.selectAccountItem = item;
                        this.selectAccount = item.loginAccount;
                        //显示控件
                        $('#userSelectModal').modal();
                    }
                },
                /**保存更改*/
                saveSelect: function () {
                    //TODO 调后台更新
                    var that = this;
                    this.$send(this.getUrl('/product/employee/bindAccountNo?id=' + this.selectAccountItem.id +'&loginAccount=' + this.selectAccount),null,function(){
                        //成功则更新UI
                        that.selectAccountItem.loginAccount = that.selectAccount;
                    });
                }
            },
            mounted: function () {
                this. child = this.$refs['child'] ;
            },
        });

    });

</script>